<template>
	<view class="uni-page">
		<cu-custom :isBack="false">
			<block class="bar-font" slot="backText">设备配网</block>
		</cu-custom>
		
		<view class="page-main">
			<u-steps :list="numList" mode="number" :current="-1"></u-steps>
			<view class="main-box" v-if="mac">
				<view class="title">请按照步骤操作Wi-Fi</view>
				<view class="des">1. 设备是否打开开关</view>
				<view class="des">2. 检查指示灯是否在闪烁</view>
				<view class="img-box">
					<u-image width="100%" height="400rpx" src=""></u-image>
				</view>
				<view class="buttons">
					<u-button type="primary" shape="circle" @click="tipclick">确认指示灯在闪烁</u-button>
				</view>
			</view>
			<view class="main-box" v-else>
				<view class="title">请先选择设备</view>
				<u-form
					 :label-width="140"
					:label-style="{
						fontSize: '30rpx',
						paddingRight: '10rpx'
					}"
					class="user-form">
					<u-form-item label="设备编号" prop="nodeId" required>
						<u-input type="text" v-model="macInput" placeholder="请扫描/输入设备编号" :disabled="!!deviceId">
						</u-input>
						<u-icon v-show="!deviceId" name="scan" size="55rpx" slot="right" type="success" @click="scanCode()"></u-icon>
					</u-form-item>
					
					<view class="formsubmit">
						<u-button type="primary" shape="circle" @click="btnqueren">确认</u-button>
					</view>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	import { mixinData } from '@/pages/mixin.js'
	
	export default {
		mixins: [mixinData],
		onLoad(options) {
			// 判断是否有mac地址传入，如果没有，那么扫码选择目标设备
			if (options.mac) {
				this.mac = options.mac
			}
		},
		data() {
			return {
				macInput: null,
				mac: null,
				numList: [{
					name: '配置硬件设备'
				}, {
					name: '设置家庭WiFi'
				}, {
					name: '开始配网'
				}]
			}
		},
		methods: {
			btnqueren() {
				if (!this.macInput || this.macInput.startsWith("ld_")) {
					uni.showToast({
						title: '请填写正确编号'
					})
				}
				this.mac = this.macInput
			},
			// 扫码
			scanCode() {
				const _this = this
				uni.scanCode({
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						_this.mac = res.result
					},
					fail: function(){
						uni.showToast({
							title: '扫描失败，请重试',
							icon: 'none'
						})
					}
				})
			},
			tipclick(){
				uni.navigateTo({
				    url: '../formpage/formpage?mac=' + this.mac
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formsubmit {
		margin-top: 2rem;
	}
	.uni-page {
		height: 100vh;
		background-color: #FFFFFF;
	}
	.page-main {
		padding-top: 40rpx;
		.main-box {
			padding: 60rpx 40rpx 0;
		}
		.img-box {
			margin-top: 80rpx;
		}
		.title {
			font-size: 34rpx;
			font-weight: 600;
			padding-bottom: 6rpx;
			padding-left: 6rpx;
		}
		.des {
			color: $u-content-color;
			padding-left: 6rpx;
		}
		.buttons{
			margin: 100rpx 20rpx 0;
		}
	}
</style>
